<style lang="less" scoped>
.fontNumber {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 26px;
    color: #04A097;
    line-height: 32px;
    text-align: center;
    font-style: normal;
    text-transform: none;

    // background: linear-gradient(blue, #C9DCFD);
    background: url('/src/views/Analyze/energyAnalysis/img/组 12976@2x.png');
    border-radius: 0px 0px 2px 2px;
    margin-right: 4px;
    opacity: 0.84;
    width: 24px;
    height: 32px;
    display: inline-block;
}
</style>
<template>
    <span>
        <!-- {{ data.formData.number }} -->
        <template v-for="item in data.formData.number ">
            <span v-if='[" ,", ".","," ].includes(item)'>{{ item}} </span>
            <span v-else class=" fontNumber">{{ item}} </span>
        </template>
    </span>
</template>

<script setup>
import { ref, reactive, toRefs, watchEffect, computed, watch, onUpdated, onBeforeUpdate, onBeforeMount, onMounted } from "vue";
const props = defineProps({
    data: {
        type: [Object, String, Number, Array],
        default: function () {
            return 0
        }
    }
});
// const emit = defineEmits(["change"]);
// emit('change');

const data = reactive({
    formData: {
        number: computed(() => {
            return (Number(props.data) || 0) + "";
        })  
    }
});


const mytext = ref(123);
watch(mytext, (newValue, oldValue) => {
    console.log(newValue);
});

//watch(() => props.value, (newValue, oldValue) => {
//
//}, { deep: true, immediate: true });

</script>
<style lang="less" scoped></style>